<template>
  <a-drawer v-model:open="open"
            width="50%"
            :footer="null"
            title="新增船员调令"
            :keyboard="false"
            :mask-closable="false"
            @close="handleClose"
            @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="vertical"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '100%' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="12">
          <a-form-item required>
            <template #label>
              <span class="fw">所在船舶</span>
            </template>
            <a-select
                v-model:value="formState.suoZaiChuanBo"
                ref="select"
                class="w100"
                placeholder="请选择"
                allow-clear
                style="width: 120px"
                @change="handleChangeChuanbo">
                <a-select-option  v-for="item in chuanboList" :key="item.id" :value="item.zhongWenMing">{{ item.zhongWenMing }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <a-form-item required>
            <template #label>
              <span class="fw">职位</span>
            </template>
            <a-select
                v-model:value="formState.zhiWei"
                ref="select"
                class="w100"
                placeholder="请选择"
                allow-clear
                @change="handleZhiwei"
                style="width: 120px"
            >
              <a-select-option  v-for="item in filterZhiweiList" :key="item" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <a-tabs v-model:activeKey="currentIndex" type="card" @change="handleChangeTab">
            <a-tab-pane :key="1" tab="轮换船员">
              <a-row :gutter="16">
                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">下船船员</span>
                    </template>
                    <a-select
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px"
                        @change="handleChangeXiaChuan"
                        v-model:value="formState.xiaChuanYuanId">
                      <a-select-option  v-for="item in filterChuanyuanList" :key="item.chuanYuanId" :value="item.chuanYuanId">{{ item.chuanYuanMing }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">下船原因</span>
                    </template>
                    <a-select
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px"
                        v-model:value="formState.xiaChuanYuanYin">
                      <a-select-option v-for="item in xiachuanList" :key="item.name" :value="item.name">{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">下船船员身份号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.xiaChuanYuanShenFenHao"/>
                  </div>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">下船船员手机号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.xiaChuanYuanShouJiHao"/>
                  </div>
                </a-col>

                <a-col class="gutter-row" :span="24">
                  <div style="width: 100%;border-top: 1px dashed #8c8888; margin:10px 0px 15px 0px "></div>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">上船船员</span>
                    </template>
                    <a-select
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px"
                        @change="handleChangeShangChuan"
                        v-model:value="formState.shangChuanYuanId">
                      <a-select-option  v-for="item in chuanyuanList" :key="item.id" :value="item.id">{{ item.xingMing }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item>
                    <template #label>
                      <span class="fw">兼任职务</span>
                    </template>
                    <a-select
                        v-model:value="formState.zhiWu"
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px">
                      <a-select-option  v-for="item in jianrenzhiweiList" :key="item.id" :value="item.zhiWeiMing">{{ item.zhiWeiMing }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">上船船员身份号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.shangChuanYuanShenFenHao"/>
                  </div>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">上船船员手机号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.shangChuanYuanShouJiHao"/>
                  </div>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">预计上/下船日期</span>
                    </template>
                    <a-date-picker class="w100"  v-model:value="formState.shangXiaChuanRiQi" maxlength="100" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></a-date-picker>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">预计上/下船地点</span>
                    </template>
                    <a-input placeholder="请填写" maxlength="100" v-model:value="formState.shangXiaChuanDiDian"></a-input>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="24">
                  <a-form-item>
                    <template #label>
                      <div class="flex flex-wrap">
                        <span class="fw">调令备注</span>
                      </div>
                    </template>
                    <a-textarea placeholder="请填写" maxlength="400" v-model:value="formState.beiZhu"  rows="3"></a-textarea>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-tab-pane>

            <a-tab-pane :key="2" tab="仅有上船">
              <a-row :gutter="16">
                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">上船船员</span>
                    </template>
                    <a-select
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px"
                        @change="handleChangeShangChuan"
                        v-model:value="formState.shangChuanYuanId"
                    >
                      <a-select-option  v-for="item in chuanyuanList" :key="item.id" :value="item.id">{{ item.xingMing }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item>
                    <template #label>
                      <span class="fw">兼任职务</span>
                    </template>
                    <a-select
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px"
                        v-model:value="formState.zhiWu">
                      <a-select-option  v-for="item in jianrenzhiweiList" :key="item.id" :value="item.zhiWeiMing">{{ item.zhiWeiMing }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">上船船员身份号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.shangChuanYuanShenFenHao"/>
                  </div>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">上船船员手机号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.shangChuanYuanShouJiHao"/>
                  </div>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">预计上船日期</span>
                    </template>
                    <a-date-picker class="w100"  v-model:value="formState.shangXiaChuanRiQi" maxlength="100" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></a-date-picker>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">预计上船地点</span>
                    </template>
                    <a-input placeholder="请填写" v-model:value="formState.shangXiaChuanDiDian" maxlength="100"></a-input>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="24">
                  <a-form-item>
                    <template #label>
                      <div class="flex flex-wrap">
                        <span class="fw">调令备注</span>
                      </div>
                    </template>
                    <a-textarea placeholder="请填写" v-model:value="formState.beiZhu"  maxlength="400" rows="3"></a-textarea>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-tab-pane>

            <a-tab-pane :key="3" tab="仅有下船">
              <a-row :gutter="16">
                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">下船船员</span>
                    </template>
                    <a-select
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px"
                        @change="handleChangeXiaChuan"
                        v-model:value="formState.xiaChuanYuanId">
                        <a-select-option  v-for="item in filterChuanyuanList" :key="item.chuanYuanId" :value="item.chuanYuanId">{{ item.chuanYuanMing }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">下船原因</span>
                    </template>
                    <a-select
                        ref="select"
                        class="w100"
                        placeholder="请选择"
                        allow-clear
                        style="width: 120px"
                        v-model:value="formState.xiaChuanYuanYin">
                      <a-select-option v-for="item in xiachuanList" :key="item.name" :value="item.name">{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">下船船员身份号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.xiaChuanYuanShenFenHao"/>
                  </div>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <div class="gutter-box fw mb10">
                    <div class="mr6 mb10">下船船员手机号：</div>
                    <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.xiaChuanYuanShouJiHao"/>
                  </div>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">预计下船日期</span>
                    </template>
                    <a-date-picker class="w100"  v-model:value="formState.shangXiaChuanRiQi" maxlength="100" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></a-date-picker>
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item required>
                    <template #label>
                      <span class="fw">预计下船地点</span>
                    </template>
                    <a-input placeholder="请填写"  v-model:value="formState.shangXiaChuanDiDian" class="w100"></a-input>
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="24">
                  <a-form-item name="beiZhu">
                    <template #label>
                      <div class="flex flex-wrap">
                        <span class="fw">调令备注</span>
                      </div>
                    </template>
                    <a-textarea placeholder="请填写" v-model:value="formState.beiZhu" maxlength="400" rows="3"></a-textarea>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <a-form-item>
            <a-button  type="primary" @click.stop.prevent="handleSubmit">
              <EditOutlined v-if="formState.id "></EditOutlined>
              <PlusOutlined v-else></PlusOutlined>
              {{ formState.id ? '修改调令' : '保存调令' }}
            </a-button>
            <a-button style="margin-left: 10px" danger type="primary" @click.stop.prevent="handleClose">
              <close-outlined></close-outlined>
              关闭
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>
<script setup>
const chuanboList = ref([]);
const chuanyuanList = ref([]);
const filterChuanyuanList = ref([]);
const filterZhiweiList = ref([]);
const jianrenzhiweiList = ref([]);
const userState = useStore.userState()
const xiachuanList = computed(() => userState.getParameterList('xcyy'))
const open = ref(false);
const addLoading = ref(false);
const formRef = ref({})
const currentIndex = ref(1)
const emits = defineEmits(["success"])
const newChuanbozhiweiList = ref([])
const formState = ref({
  leiXing: 1, // 1:轮换船员 2:仅有上船 3:仅有下船
  suoZaiChuanBo: undefined,
  zhiWei: undefined,
  xiaChuanYuanId: undefined,
  xiaChuanYuanShenFenHao: "",
  xiaChuanYuanShouJiHao:"",
  xiaChuanYuanYin: undefined,
  shangChuanYuanId: undefined,
  shangChuanYuanShenFenHao: "",
  shangChuanYuanShouJiHao:"",
  zhiWu: undefined,
  shangXiaChuanRiQi: "",
  shangXiaChuanDiDian: "",
  beiZhu: "",
})



const handleChangeTab = (e)=>{
  currentIndex.value = e
  formState.value.leiXing = e
}

const handleChangeChuanbo = async (value,item) => {
  if (value) {
    const resp = await useGetDiaoLingChuanYuanApi(item.key);
    newChuanbozhiweiList.value = resp.data
    formState.value.zhiWei = undefined
    formState.value.xiaChuanYuanId = undefined
    filterZhiweiList.value = []
    filterChuanyuanList.value = []
    filterZhiweiList.value = resp.data.map((c)=>c.zhiWei)
  } else {
    formState.value.zhiWei = undefined
    formState.value.xiaChuanYuanId = undefined
    formState.value.xiaChuanYuanShenFenHao = ''
    formState.value.xiaChuanYuanShouJiHao = ''
    filterZhiweiList.value = []
    filterChuanyuanList.value = []
  }
}

const handleZhiwei = async (item) => {
  formState.value.xiaChuanYuanId = null
  formState.value.xiaChuanYuanShenFenHao = ''
  formState.value.xiaChuanYuanShouJiHao = ''
  if (item) {
    filterChuanyuanList.value = newChuanbozhiweiList.value.find(c=>c.zhiWei==item).chuanYuanVOS;
  } else {
    filterChuanyuanList.value = []
  }
}

const handleChangeShangChuan = (e) => {
  if (e) {
    var user = chuanyuanList.value.find(obj=>obj.id == e);
    formState.value.shangChuanYuanId = e
    formState.value.shangChuanYuanShenFenHao = user.shenFenHao
    formState.value.shangChuanYuanShouJiHao = user.shouJiHao
  } else {
    formState.value.shangChuanYuanId = null
    formState.value.shangChuanYuanShenFenHao = ''
    formState.value.shangChuanYuanShouJiHao = ''
  }
}

const handleChangeXiaChuan = (e) => {
  if (e){
    var user = chuanyuanList.value.find(obj => obj.id == e);
    formState.value.xiaChuanYuanId = e
    formState.value.xiaChuanYuanShenFenHao = user.shenFenHao
    formState.value.xiaChuanYuanShouJiHao = user.shouJiHao
  }else{
    formState.value.xiaChuanYuanId = null
    formState.value.xiaChuanYuanShenFenHao = ''
    formState.value.xiaChuanYuanShouJiHao = ''
  }
}

const handleLoadChuaboData = async () => {
  var res = await useLoadChuanBoXinXiBiaoApi()
  chuanboList.value = res.data
}

const handleLoadChuanYuanData = async () => {
  var res = await useLoadChuanYuanKuBiaoApi()
  chuanyuanList.value = res.data
}

const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  jianrenzhiweiList.value = res.data
}

const handleOpen = async (record) => {
  currentIndex.value = 1
  open.value = true
  await handleLoadChuaboData()
  await handleLoadChuanYuanData()
  await handleLoadZhiweiData()
  if(record && record.id){
    const res = await useGetChuanYuanDiaoLingApi(record.id)
    formState.value = res.data
  }
}


const handleSubmit = async () => {
  try {
    addLoading.value = true
    if (!handleValidate()) {
      return
    }
    await useSaveUpdateChuanYuanDiaoLingApi(formState.value)
    addLoading.value = false;
    useMessage().success(formState.value.id?"编辑成功!":"添加成功")
    emits("success")
    handleClose()
  }catch (e){
    addLoading.value = false
    useMessage().error(e.msg)
  }
}
const handleValidate = () => {
  if(!formState.value.suoZaiChuanBo){
    useMessage().error("请输入所在船舶")
    addLoading.value = false
    return false;
  }
  if(!formState.value.zhiWei){
    useMessage().error("请输入职位")
    addLoading.value = false
    return false;
  }
  if (currentIndex.value === 1) { //轮换船员
    if(!formState.value.xiaChuanYuanId){
      useMessage().error("请输入下船船员")
      addLoading.value = false
      return false;
    }
    if(!formState.value.xiaChuanYuanYin){
      useMessage().error("请输入下船原因")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangChuanYuanId){
      useMessage().error("请输入上船船员")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangXiaChuanRiQi){
      useMessage().error("请输入预计上/下船日期")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangXiaChuanDiDian){
      useMessage().error("请输入预计上/下船地点")
      addLoading.value = false
      return false;
    }
  }
  if (currentIndex.value === 2) { // 仅有上船
    if(!formState.value.shangChuanYuanId){
      useMessage().error("请输入上船船员")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangXiaChuanRiQi){
      useMessage().error("请输入预计上船日期")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangXiaChuanDiDian){
      useMessage().error("请输入预计上船地点")
      addLoading.value = false
      return false;
    }
  }
  if (currentIndex.value === 3) { // 仅有下船
    if(!formState.value.xiaChuanYuanId){
      useMessage().error("请输入下船船员")
      addLoading.value = false
      return false;
    }
    if(!formState.value.xiaChuanYuanYin){
      useMessage().error("请输入下船原因")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangXiaChuanRiQi){
      useMessage().error("请输入预计下船日期")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangXiaChuanDiDian){
      useMessage().error("请输入预计下船地点")
      addLoading.value = false
      return false;
    }
  }
  return true;
}

const handleClose = () => {
  filterChuanyuanList.value = []
  chuanyuanList.value = []
  filterZhiweiList.value = []
  formState.value = {
    id: "",
    leiXing: 1, // 1:轮换船员 2:仅有上船 3:仅有下船
    suoZaiChuanBo: undefined,
    zhiWei: undefined,
    xiaChuanYuanId: undefined,
    xiaChuanYuanShenFenHao: "",
    xiaChuanYuanShouJiHao:"",
    xiaChuanYuanYin: undefined,
    shangChuanYuanId: undefined,
    shangChuanYuanShenFenHao: "",
    shangChuanYuanShouJiHao:"",
    zhiWu: undefined,
    shangXiaChuanRiQi: "",
    shangXiaChuanDiDian: "",
    beiZhu: "",
  }
  open.value = false
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>
